<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      :visible="showAddDailog"
      title="新增员工"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <el-form
        ref="employFormRef"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="姓名" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入姓名"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input
            v-model="formData.mobile"
            placeholder="请输入手机"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker
            v-model="formData.timeOfEntry"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '100%' }"
            placeholder="请选择入职时间"
            clearable
          />
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select
            v-model="formData.formOfEmployment"
            placeholder="请选择聘用形式"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in employEnum.hireType"
              :key="index"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            placeholder="请输入工号"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <el-input
            v-model.trim="formData.departmentName"
            placeholder="请输入部门"
            clearable
            :style="{ width: '100%' }"
            @focus="showDepart"
          />
          <!-- 选择器 -->
          <el-cascader
            v-if="showtree"
            :options="department"
            clearable
            :show-all-levels="true"
            :props="{ value: 'name', label: 'name' }"
            @change="test"
          >
            <template slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="转正日期" prop="correctionTime">
          <el-date-picker
            v-model="formData.correctionTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '100%' }"
            placeholder="请选择转正日期"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils/index'
// 数据 形式 规则
import employEnum from '@/api/constant/employees.js'
// 添加 新员工
import { addEmploy } from '@/api/employees.js'
export default {
  components: {},
  inheritAttrs: false,
  props: {
    showAddDailog: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      // 部门 选择 器 是否 显示
      showtree: false,
      formData: {
        username: undefined,
        mobile: undefined,
        timeOfEntry: null,
        formOfEmployment: undefined,
        workNumber: undefined,
        departmentName: undefined,
        correctionTime: null
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机',
            trigger: 'blur'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        timeOfEntry: [],
        formOfEmployment: [
          {
            required: true,
            message: '请选择聘用形式',
            trigger: 'change'
          }
        ],
        workNumber: [
          {
            required: true,
            message: '请输入工号',
            trigger: 'blur'
          }
        ],
        departmentName: [
          {
            required: true,
            message: '请输入部门',
            trigger: 'change'
          }
        ],
        correctionTime: [
          {
            required: true,
            message: '请选择转正日期',
            trigger: 'change'
          }
        ]
      },
      formOfEmploymentOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      employEnum,
      // 获取过来 的 部门 数据
      department: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    test(val) {
      if (val.length <= 0) return
      // 把表单数据 给 输入文本 框 数据
      this.formData.departmentName = val[val.length - 1]
      this.showtree = false
    },
    // 展示 部门 结构
    async showDepart() {
      const { depts } = await getDepartments()
      // 转化 数据 形式 变成 树状 结构
      this.department = transListToTreeData(depts, '')
      this.showtree = true
    },
    onOpen() {},
    onClose() {
      this.$refs['employFormRef'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['employFormRef'].validate(async(valid) => {
        if (!valid) return
        try {
          await addEmploy(this.formData)
          // 刷新页面
          this.$parent.getDepartments()
          this.$message.success('添加成功')
        } catch (error) {
          console.log('添加失败', error)
        }
        this.close()
      })
    }
  }
}
</script>
<style>
</style>
